<template>
	<view class="order-product-box">
		<view v-for="(item,index) in list" :key="index">
			<view class="order-product-item col-1" @tap="toDetail(item)">
<!-- 			<view class="order-product-item col-1" @tap="toDetail(item,'product/detail')"> -->
				<view>
					<image mode="widthFix" class="product-img" :src="item.image"></image>
				</view>
				<view class="product-left">
					<view class="product-name">
						<text>{{item.title}}</text>
					</view>
					<!-- <view class="product-name" v-if="item.marks.length>0 && 1==2">
						<block v-for="(mark,index1) in item.marks" :key="index1">
							<text class="product-marks" v-if="mark">{{mark}}</text>
						</block>
					</view> -->
					<view class="product-sale">
						<span class="price span-flew">{{item.create_at}}~{{item.end_at}}</span>
					</view>

					<!-- <view class="product-desc">
						<text class="btn-text text-success" v-if="item.is_hot==1">推荐</text>
						<text class="btn-text text-error" v-if="item.status==0">已下架</text>
						<text class="btn-text text-primary" v-if="item.status==1">上架中</text>
					</view> -->
					<view class="product-desc">
						<text class="btn-text text-success">报名人数: {{item.number}}/{{item.total}}</text>
					</view>
				</view>
			</view>
			<view class="product-do">
				<view class="gray-button">
					<text v-if="item.number<item.total" @tap="btnClick(item,0,'去报名')">去报名</text>

					<text class="text-success" v-if="item.number==item.total"
						@tap="btnClick(item,1,'报名已满')">报名已满</text>
					<text class="text-danger" v-if="item.number>item.total"
						@tap="btnClick(item,1,'删除')">报名已满，</text>
				</view>

				<!-- <text class="btn-text text-default" @tap="toDetail(item,'goods/post')">编辑</text> -->
			</view>
		</view>
		<!-- <uni-load-more :status="status"></uni-load-more> -->
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue"
	/**
	 * ZlxlsGoodsEditList 订单列表
	 * @description 订单列表组件
	 */
	export default {
		components: {
			uniLoadMore
		},
		name: 'ZlxlsGoodsEditList',
		props: {
			//产品列表
			list: Array,
			//分页数据状态 more：还有更多数据、noMore：没有更多数据、loadding ：加载中
			status: {
				type: String,
				value: ''
			}
		},
		methods: {
			btnClick(item, value, name) {
				console.log("btnClick")
				console.log("item",item)
				this.$emit("signUpClick", {item,value,name});
			},
			toDetail(item) {
				console.log("emit")
				this.$emit('gotoDetail',item);  
			}
		}
	}
</script>

<style lang="scss">

	.product-do {
		display: flex; 
		justify-content: flex-end; /* 子元素靠右对齐 */  
		// padding: 20rpx 4%;
		background: #fff;
		margin-bottom: 20rpx;
		// text-align: right;

		// text {
		// 	margin-left: 60rpx;
		// 	padding: 8rpx 16rpx;
		// 	border-radius: 10rpx;
		// }
	}

	.product-cate {
		border: 1rpx solid #4fd216;
		color: #4fd216;
		font-size: 24rpx;
		padding: 0 8rpx;
		margin-right: 8rpx;
	}

	.product-marks {
		margin-right: 8rpx;
	}

	.product-num1 {
		border: 1rpx solid #ff6600;
		color: #ff6600;
	}

	.product-num2 {
		border: 1rpx solid #f00;
		color: #f00;
	}

	.product-num3 {
		border: 1rpx solid #f0ad4e;
		color: #f0ad4e;
	}

	.product-num4 {
		border: 1rpx solid #16baaa;
		color: #16baaa;
	}

	.product-num5 {
		border: 1rpx solid #dd524d;
		color: #dd524d;
	}

	.text-right {
		float: right;

	}

	.bg-gray {
		background-color: #f2f2f2;
	}

	.padding {
		padding: 0 4%;
	}

	.product-box {
		display: flex;
		box-sizing: border-box;
		flex-wrap: wrap;
	}

	.product-item {
		box-sizing: border-box;
	}

	.product-sale {
		display: flex;
		justify-content: space-between;
		color: #999;
		font-size: 24rpx;
		width: 100%;
		padding: 6rpx 0;
		margin-top: 80rpx;
	}

	.product-left {
		width: 100%;
		box-sizing: border-box;
	}

	.product-name {
		color: #333;
		font-size: $uni-font-size-base;
		margin-bottom: 10rpx;
	}

	.product-desc {
		color: #999;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.col-1 {
		width: 100%;
		background-color: #fff;
		display: flex;
		padding: 20rpx 4%;
		box-sizing: border-box;
		align-items: flex-start;
		border-bottom: 1px solid #eee;
	}

	.col-1 .product-item {
		display: flex;
	}

	.col-1 .product-img {
		width: 200rpx;
		height: 133rpx;
		margin-right: 20rpx;
	}

	.col-2 {
		width: 48%;
		margin: 30rpx 0 0 0;
		background-color: #fff;
		border-radius: 5px;
	}

	.col-2:nth-child(odd) {
		margin-right: 4%;
	}

	.col-2 .product-img {
		width: 100%;
		border-radius: 3px;
	}

	.col-2 .product-name {
		line-height: $uni-font-size-base + 10;
		height: ($uni-font-size-base+10) * 2;
	}

	.col-2 .product-left {
		padding: 8rpx 8rpx;
	}

	.del-price {
		font-size: 20rpx;
		text-decoration: line-through;
		margin-right: 30rpx;
	}

	.real_price {
		color: #ff6600;
		font-size: $uni-font-size-lg;
	}

	.people {
		margin-top: 10rpx;
	}

	.people-num {
		color: #ff6600;
		font-weight: bold;
	}

	.pintuan-status {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.pintuan-btn {
		background-color: #ff6600;
		margin-left: 6rpx;
		padding: 10rpx 15rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.share-btn {
		background-color: #ff6600;
		line-height: 1;
		padding: 10rpx 15rpx;
		color: #fff;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.gray-button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 150rpx;
		/* 设置按钮宽度 */
		height: 40rpx;
		/* 设置按钮高度 */
		background-color: #f0f0f0;
		/* 设置背景颜色为灰色 */
		border-radius: 30rpx;
		/* 设置圆角 */
		margin: 10rpx;
		/* 设置外边距 */
		padding: 10rpx;
		/* 设置内边距 */
		color: #55aaff;
		/* 设置文本颜色 */
		font-size: 28rpx;
		/* 设置字体大小 */
	}
</style>